iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 4
1

一個頁面一個 h1

開始練習規劃網頁內容,使用 h1-h6 來表示標題重要性時,就曾經因為覺得有幾個地方標題都很大,因此全部使用 h1 標籤來表示大標題,後來才了解一個頁面最好只使用一個 h1 元素,因此通常會使用在最上方的主標題,或是 logo

依順序 ( h2 h3 ) 規劃結構層次

一直到目前都還在練習要怎麼規畫好一個頁面中的 h1- h6 結構,初學時,都會從純文字的結構開始練習分配標題標籤,很容易就將整個文章的結構規劃好 h1、h2、h3 等等,到一個完整的網頁不會只有純文字,因此一個頁面在規劃如何使用標題標籤來讓整體架構有清楚的階層會需要思考較久
之前也有因為覺得某些地方的標題重要性不大,因此直接跳過 h2 使用 h3 標籤,但較好的做法還是從 h1 依序使用 h2、h3 等等標籤,結構上才不會造成疑惑
另外雖然有 h1 到 h6 的標籤可以使用,但盡量使用 h1 到 h3 來表示階層即可,若內容需要使用到 h4 到 h6 來規劃結構,可以將這些內容移至其他頁面,維持較簡潔的標題階層

有清楚易懂的標示網頁結構,可以讓使用者花較少時間掌握想傳達的重點,搜尋引擎也會依照標題作為重要關鍵字,當搜尋相關字詞就會依相關性排序搜尋結果,以及有助於視障者使用讀頻軟體聆聽網頁中的資訊架構

通常會為了提升使用者的可讀性,依照樣式、字體大小來表示內容重要性,但在規劃要給予何種 HTML 標籤,並不總是看樣式、大小等外觀來給予標題標籤,還是要以文字內容為主

參考資料:
基本 HTML 文字 - 學習該如何開發 Web | MDN


上一篇
關於 <ul> <li>(二)
下一篇
HTML 元素組成
系列文
學習 HTML / CSS 遇到的問題 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言